<template>
  <div class="mail-list-page">
    <div class="mail-list-page-toolbar toolbar-2col">
      <div class="left-wrap">
        <div class="xmail-ui-checkbox ui-checkbox-disabled select-all">
          <div class="ui-checkbox-icon-uncheck"></div>
        </div>

        <div class="toolbar-title">
          <span class="toolbar-folder-name">我的文件夹</span>
          <div class="mail-list-page-filter-btn">
            <div class="filter-btn-inner">
              <span
                class="xmail-ui-icon btn-icon"
                style="width: 16px; height: 20px"
              >
                <span>^</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="xmail-ui-ellipsis-toolbar">
          <div class="ui-ellipsis-toolbar-btns">
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>🚮</i>
              </span>
              <div class="ui-btn-text">删除</div>
            </div>

            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>➥</i>
              </span>
              <div class="ui-btn-text">转发</div>
            </div> -->
            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>❗</i>
              </span>
              <div class="ui-btn-text">举报</div>
            </div> -->
            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>📃</i>
              </span>
              <div class="ui-btn-text">全部已读</div>
            </div> -->
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>⭐</i>
              </span>
              <div class="ui-btn-text">点击邮件右侧可以添加星标邮件哦~</div>
              <span
                class="xmail-ui-icon ui-btn-down-icon"
                style="width: 8px; height: 6px; color: var(--base_gray_050)"
              >
                <i></i>
              </span>
            </div>
          </div>

          <div class="ui-ellipsis-toolbar-more" style="width: 121px"></div>
        </div>

        <div class="mail-list-page-toolbar-mail-total">
          <div
            class="xmail-ui-btn ui-btn-size32 ui-btn-them-clear-gray mail-total-btn"
          >
            <div class="ui-btn-text">共 0 封</div>
            <span
              class="xmail-ui-icon ui-btn-down-icon"
              style="width: 8px; height: 6px; color: var(--base_gray_050)"
            >
              <i></i>
            </span>
          </div>
        </div>

        <div
          class="xmail-ui-btn ui-btn-size32 ui-btn-them-clear-gray ui-btn-only-icon"
          style="margin-left: 4px"
        >
          <span
            class="xmail-ui-icon ui-btn-icon"
            style="width: 20px; height: 20px"
          >
            <i>🚪</i>
          </span>
        </div>
      </div>
    </div>
    <div class="mail-list-page-body">
      <div class="mail-list-page-items">
        <!-- 原放点 -->
        <div class="mail-list-page-tips">
          <div class="empty-tips">暂无文件</div>
        </div>
      </div>
    </div>
  </div>

  <!--  -->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style scoped>
.mail-list-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mail-list-page-tips {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 24px;
}

.mail-list-page-tips .empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--base_gray_080);
}

.mail-list-page-items-inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-list-page-toolbar {
  flex-shrink: 0;
  display: flex;
  height: 48px;
}

.mail-list-page-toolbar .left-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  box-sizing: border-box;
}

.mail-list-page-toolbar.toolbar-2col .left-wrap {
  width: 274px;
}

.mail-list-page-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 354px;
}

.mail-list-page-toolbar {
  flex-shrink: 0;
  display: flex;
  height: 48px;
}

.mail-list-page-toolbar .left-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  box-sizing: border-box;
}

.mail-list-page-toolbar.toolbar-2col .left-wrap {
  width: 274px;
}

.xmail-ui-checkbox.ui-checkbox-disabled {
  opacity: 0.3;
  --uncheck-bg: var(--base_gray_010);
  --uncheck-border: var(--base_gray_050);
}

.mail-list-page-toolbar .select-all {
  height: 100%;
  width: 44px;
  padding-left: 18px;
  box-sizing: border-box;
}

.xmail-ui-checkbox {
  --uncheck-bg: transparent;
  --uncheck-border: var(--base_gray_040);
  --checked-color: var(--theme_primary);
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.xmail-ui-checkbox .ui-checkbox-icon-uncheck {
  width: 16px;
  height: 16px;
  border: 1px solid var(--uncheck-border);
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--uncheck-bg);
}

.mail-list-page-toolbar .toolbar-title {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-toolbar .toolbar-folder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--base_gray_100);
}

.mail-list-page-filter-btn {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --text-color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--bg);
  margin-left: 6px;
}

.mail-list-page-filter-btn .filter-btn-inner {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-filter-btn .btn-icon {
  color: var(--icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-list-page-toolbar .right-wrap {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding-right: 16px;
  box-sizing: border-box;
}

.xmail-ui-ellipsis-toolbar {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-btns {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-more {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.mail-list-page .mail-list-page-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  min-height: 1000px;
}

.mail-list-page-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 354px;
}
</style>
